.flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: space-around;
}

.flex_item {
    flex: 1;
}

.flex_2 {
    flex: 2;
}

.flex_3 {
    flex: 3;
}

.b {
    font-weight: 800;
}

.text_sub {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: break-word;
}

.index {
    .s_r {
        width: 48%;
        height: 90vw;
        .mh_item img {
            width: auto;
            height: 100%;
        }
    }
    .rec {
        .special {
            .mh_item {
                width: 100%;
            }
        }
    }
    .mh_list {
        height: initial;
    }
    .special {
        .flex {
            align-content: initial;
        }
        .mh_item img {
            height: inherit;
            width: inherit;
        }
    }
}

.icon {
    color: #ffb48e;
}

.mh_item {
    width: 46%;
    margin: 1%;
    position: relative;
    img {
        width: 100%;
    }
    .mh_des {
        background: rgba(0, 0, 0, .4);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        color: #fff;
        height: 45px;
        font-size: 13px;
        padding: 5px;
        display: flex;
        flex-direction: column;
        align-content: baseline;
        justify-content: center;
        .subtitle {
            font-size: 12px;
            color: #e6e0e0;
        }
    }
}

.more {
    .mh_item {
        width: 30%;
        margin: 1.33%;
    }
}

.clearfix {
    *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}

.clearfix:after {
    clear: both;
}

.mu-item-wrapper .mu-item.is-selected {
    color: white;
    background: #ffb48e;
}

.index {
    /* 推荐 */
    .mu-grid-tile.multiline .mu-grid-tile-titlebar {
        height: 40px;
    }
    .mu-grid-tile-title {
        font-size: 13px;
    }
    .mu-grid-tile-subtitle {
        color: #e6e0e0;
    }
    .menu-list {
        position: relative;
        z-index: 12;
        width: 100%;
        height: 4.5rem;
        margin-top: -1.75rem;
        background: transparent url('././../../public/images/side.png') no-repeat scroll 0 100%;
        background-size: 100% 4.5rem;
        font-size: 0;
        text-align: center;
        padding: 0;
        .item {
            display: inline-block;
            width: 22%;
            margin-top: 1.5rem;
            text-align: center;
            .link {
                display: inline-block;
                padding-left: 0.25rem;
                padding-right: 0.25rem;
                padding-bottom: 0.2rem;
                .name {
                    display: block;
                    margin-top: 0.15rem;
                    font-size: 0.6rem;
                    color: #969696;
                }
            }
            .icon {
                width: 1.7rem;
                height: 1.7rem;
                display: block;
                width: 1.7rem;
                height: 1.7rem;
                background-repeat: no-repeat;
                background: url("./../../public/images/sc_img_index.png?v=a3a8f55fc8ea2149") no-repeat;
                background-size: 20.5rem 17.5rem;
            }
            .icon.category {
                background-position: -17rem -3.75rem;
            }
            .icon.rank {
                background-position: -13rem -5.825rem;
            }
            .icon.time {
                background-position: -14.95rem -5.825rem;
            }
            .icon.history {
                background-position: -16.9rem -5.825rem;
            }
        }
    }
    .mu-carousel {
        height: 40vh;
    }
    .mu-carousel-indicators {
        z-index: 11;
    }
    .bannerImg {
        position: relative;
        z-index: 10;
        display: block;
        height: 100%;
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
    }
    .hisbox {
        position: relative;
        max-width: 80vw;
    }
    .histag {
        position: absolute;
        right: 30%;
        top: -90%;
        max-width: 80vw;
    }
    .his {
        color: #999;
        max-width: 88%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .type {
        width: 20%;
        align-items: center;
        text-align: center;
        .pic {
            padding: 5px;
        }
        .typeText {
            font-size: smaller;
            color: #0077b5;
        }
        img {
            width: 90%;
        }
    }
}